<template>
  <div class="form-group">
    <div class="input-group">
      <input
        :type="type"
        class="form-control"
        :placeholder="placeholder"
        :value="password"
        @input="$emit('input',$event.target.value)"
      />
      <div class="input-group-append">
        <button
          class="btn btn-primary"
          type="button"
          @click="isShowPassword=!isShowPassword"
        >{{ showPasswordText }}</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PasswordInput",
  model: {
    prop: "password",
    event: "input"
  },
  props: {
    password: {
      default: ""
    },
    placeholder: {
      default: ""
    }
  },
  data: function() {
    return {
      isShowPassword: false
    };
  },
  computed: {
    showPasswordText: function() {
      return this.isShowPassword ? "隐藏" : "显示";
    },
    type: function() {
      return this.isShowPassword ? "text" : "password";
    }
  }
};
</script>